<template>
	<view class="shoop_card_box">
		<view class="">
			<!-- 代领去 -->
			<view class=" " v-for="(item,index) in listweilingq" :key="index" v-if="listweilingq"
				:class="[item.min_amount == '0' ? 'bgred' : 'bg']" style="position: relative; box-sizing: border-box;">
				<view class="textColor-white" style="position:absolute">
					<view class="d-flex-yCenter-ju " style="padding:46rpx 0rpx 2rpx 36rpx;">
						￥<view class="" style="font-size: 40rpx;font-weight: 500;">
							{{item.money}}
						</view>
					</view>
					<view class="d-flex-yCenter-ju"
						style="padding:0rpx 0rpx 2rpx 54rpx;font-size: 20rpx;font-weight: 500;">
						{{item.type==1 ? '通用券' : (item.type==2 ? "品类券" : "商品券")}}
					</view>
				</view>
				<view class="d-flex-column-sb" style="height: 100%;">
					<!-- margin-left: 33%; -->
					<view class=" " style=" padding-left:234rpx;margin-top: 2rpx;">
						<!-- margin-bottom: 24rpx; margin-top: 30rpx; -->
						<view class="" style="">
							{{item.min_amount==0?'无使用门槛':`满${item.min_amount}元可使用`}}
						</view>
					</view>
					<!-- margin-left:128px; -->
					<view class="d-flex" style="font-size: 24rpx; padding-left:234rpx; margin-top: 10rpx;">
						<view class="" style="margin-right: -20rpx;  width: 120rpx;">
							{{timer}}:
						</view>
						<!-- width:230rpx; -->
						<view class="textColor999" style="">
							{{item.use_time_day==0 ? '时间不限' : computetime(item.start_time*1000) +'/'+ computetime(item.end_time*1000)}}
						</view>
					</view>
					<!-- margin-left:128px; -->
					<view class="d-flex-yCenter" style=" padding-left:234rpx;margin-top: 10rpx;"
						@click="gotolingq(item)">
						<view class="" style="margin-right: 22rpx;"
							:style="{'color': item.min_amount==0 ? '#FC3444' : '#FF9703' }">
							{{ExpiredList}}
						</view>
						<image v-if="item.min_amount==0" src="../../static/chanpt/jinrured.png" mode="widthFix"
							style="width:24rpx;height: 24rpx ;">
						</image>
						<image v-if="item.min_amount!=0" src="../../static/chanpt/jinruyellow.png" mode="widthFix"
							style="width:24rpx;height: 24rpx ;">
						</image>
					</view>
				</view>
			</view>
			<!-- 已领取 -->
			<view class=" " v-for="(item,index) in listlingqu" :key="index" v-if="listlingqu"
				:class="[item.min_amount == '0' ? 'bgred' : 'bg']" style="position: relative; box-sizing: border-box;">
				<view class="textColor-white" style="position:absolute">
					<view class="d-flex-yCenter-ju " style="padding:46rpx 0rpx 2rpx 36rpx;">
						￥<view class="" style="font-size: 40rpx;font-weight: 500;">
							{{item.money}}
						</view>
					</view>
					<view class="d-flex-yCenter-ju"
						style="padding:0rpx 0rpx 2rpx 54rpx;font-size: 20rpx;font-weight: 500;">
						{{item.type==1 ? '通用券' : (item.type==2 ? "品类券" : "商品券")}}
					</view>
				</view>
				<view class="d-flex-column-sb" style="height: 100%;">
					<!-- margin-left: 33%; -->
					<view class=" " style=" padding-left:234rpx;margin-top: 2rpx;">
						<!-- margin-bottom: 24rpx; margin-top: 30rpx; -->
						<view class="" style="">
							{{item.min_amount==0?'无使用门槛':`满${item.min_amount}元可使用`}}
						</view>
					</view>

					<view class="d-flex" style="font-size: 24rpx ; padding-left:234rpx;margin-top: 10rpx;">
						<view class="" style="margin-right: -20rpx;  width: 120rpx;">
							{{timer}}:
						</view>
						<!-- width:230rpx; -->
						<view class="textColor999" style="">
							{{item.use_time_day==0 ? '时间不限' : computetime(item.start_time*1000) +'/'+ computetime(item.end_time*1000)}}
						</view>
					</view>
					<view class="d-flex-yCenter" style=" padding-left:234rpx;margin-top: 10rpx;"
						@click="gotoshiy(item)">
						<view class="" style="margin-right: 22rpx;"
							:style="{'color': item.min_amount==0 ? '#FC3444' : '#FF9703' }">
							{{ExpiredList}}
						</view>
						<image v-if="item.min_amount==0" src="../../static/chanpt/jinrured.png" mode="widthFix"
							style="width:24rpx;height: 24rpx ;">
						</image>
						<image v-if="item.min_amount!=0" src="../../static/chanpt/jinruyellow.png" mode="widthFix"
							style="width:24rpx;height: 24rpx ;">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- 已使用-->
		<view class="">
			<view class=" " v-for="(item,index) in listshiyong" v-if="listshiyong" :key="index"
				:class="[item.min_amount == '0' ? 'bgred' :(convert==true ? 'bglast' : 'bg') ]"
				style="position: relative; box-sizing: border-box;">
				<view class="textColor-white" style="position:absolute">
					<view class="d-flex-yCenter-ju " style="padding:46rpx 0rpx 2rpx 36rpx;">
						￥<view class="" style="font-size: 40rpx;font-weight: 500;">
							{{item.money}}
						</view>
					</view>
					<view class="d-flex-yCenter-ju"
						style="padding:0rpx 0rpx 2rpx 54rpx;font-size: 20rpx;font-weight: 500;">
						{{item.type==1 ? '通用券' : (item.type==2 ? "品类券" : "商品券")}}
					</view>
				</view>
				<view class="" style="height: 100%;">
					<view class="d-flex-ybetween" style="  margin-left: 33%; ">
						<view class="" style=" margin-top: 42rpx;margin-bottom: 24rpx;">
							{{item.min_amount==0?'无使用门槛':`满${item.min_amount}元可使用`}}
						</view>
						<view class="textColor999" style="margin-top: 15rpx;margin-right: 22rpx; "
							:style="{'color':fscolor}">
							{{newshiy}}
						</view>
					</view>
					<view class="d-flex-yCenter-sb" style="padding-left:234rpx;">
						<view class="d-flex" style="font-size: 24rpx; ">
							<view class="" style="margin-right: 10rpx;   width: 120rpx;">
								{{timer}}:
							</view>
							<!-- width:230rpx; -->
							<view class="textColor999" style="">
								{{item.use_time_day==0 ? '时间不限' : computetime(item.start_time*1000) +'/'+ computetime(item.end_time*1000) }}
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- 已失效 -->
			<view class=" " v-for="(item,index) in listshixiao" v-if="listshixiao" :key="index"
				:class="[item.min_amount == '0' ? 'bgred' :(convert==true ? 'bglast' : 'bg') ]"
				style="position: relative; box-sizing: border-box;">
				<view class="textColor-white" style="position:absolute">
					<view class="d-flex-yCenter-ju " style="padding:46rpx 0rpx 2rpx 36rpx;">
						￥<view class="" style="font-size: 40rpx;font-weight: 500;">
							{{item.money}}
						</view>
					</view>
					<view class="d-flex-yCenter-ju"
						style="padding:0rpx 0rpx 2rpx 54rpx;font-size: 20rpx;font-weight: 500;">
						{{item.type==1 ? '通用券' : (item.type==2 ? "品类券" : "商品券")}}
					</view>
				</view>
				<view class="" style="height: 100%;">
					<view class="d-flex-ybetween" style="  margin-left: 33%; ">
						<view class="" style=" margin-top: 42rpx;margin-bottom: 24rpx;">
							{{item.min_amount==0?'无使用门槛':`满${item.min_amount}元可使用`}}
						</view>
						<view class="textColor999" style="margin-top: 15rpx;margin-right: 22rpx; "
							:style="{'color':fscolor}">
							{{newshiy}}
						</view>
					</view>
					<view class="d-flex-yCenter-sb">
						<view class="d-flex" style="font-size: 24rpx; padding-left:234rpx;">
							<view class="" style="margin-right: 10rpx;    width: 120rpx;">
								{{timer}}:
							</view>
							<!-- width:230rpx; -->
							<view class="textColor999" style="">
								{{item.use_time_day==0 ? '时间不限' : computetime(item.start_time*1000) +'/'+ computetime(item.end_time*1000) }}
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	// 时间戳
	import {
		time
	} from '@/config/tool.js'
	export default {
		props: {
			listweilingq: {
				type: Array,
				default: []
			},

			listlingqu: {
				type: Array,
				default: []
			},
			listshiyong: {
				type: Array,
				default: []
			},
			listshixiao: {
				type: Array,
				default: []
			},

			listweilingqs: {
				type: Boolean,
				default: false,
			},
			listlingqus: {
				type: Boolean,
				default: false,
			},
			listshiyongs: {
				type: Boolean,
				default: false,
			},
			listshixiaos: {
				type: Boolean,
				default: false,
			},
			// 已使用 已失效
			newshiy: {
				type: String,
				default: '已使用'
			},
			// 失效时间 使用时间
			timer: {
				type: String,
				default: ''
			},
			// 立即领取立即使用
			ExpiredList: {
				type: String,
				default: ''
			},
			// 已使用已失效的颜色
			fscolor: {
				type: String,
				default: '#000000'
			},
			// 判断生成已失效的灰色背景色
			convert: {
				type: Boolean,
				default: false
			},






















		},
		data() {
			return {

			}
		},
		computed: {
			computetime() {
				return (value) => {
					return time(value, 'YMD')
				}
			},
		},
		methods: {

			bottompopup(index) {
				this.$emit('popu', index)
			},
			//立即领取优惠卷
			gotolick(item) {
				this.$emit('gotolq', item)
			},
			gotolingq(item) {
				console.log(item, 'dewdwedewdew')
				this.$emit('gotolingq', item)
			},
			gotoshiy(item) {
				console.log(item, 'dewdwedewdew')
				this.$emit('gotoshiy', item)
			},
			addRandomData() {

			}
		}
	}
</script>

<style lang="scss">
	.bgred {
		width: 702rpx;
		height: 172rpx;
		background: url(../../myCardManagement/static/shoop_cardRed.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bglast {
		width: 702rpx;
		height: 172rpx;
		background: url(../../myCardManagement/static/shoop_lastcard.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bg {
		width: 702rpx;
		height: 172rpx;
		background: url(../../myIntegrateShoop/static/shoop_card.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>
